<template>
  <t-dialog
    v-model:visible="show"
    :width="1200"
    :header="$t('common.info')"
    :footer="false"
    destroyOnClose
    :closeOnOverlayClick="false"
    class="plugin-miravia-order-info"
    placement="center"
  >
    <template #body>
      <div class="content">
        <div class="bg-box">
          <t-row :gutter="30">
            <t-col :span="2">
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.number') }}</div>
                <b>{{ data.number }}</b>
              </div>
            </t-col>
            <t-col :span="2">
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.name') }}</div>
                {{ data.name }}
              </div>
            </t-col>
            <t-col :span="2">
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.price') }} <t-divider layout="vertical" /> {{ plugin.t('order.voucher') }}</div>
                <b>{{ app.money.format(data.price) }}</b>
                <t-divider layout="vertical" />
                {{ app.money.format(data.voucher * -1) }}
              </div>
            </t-col>
            <t-col :span="2">
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.time') }}</div>
                {{ data.created_time.format() }}
              </div>
            </t-col>
            <t-col :span="2">
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.status') }}</div>
                <t-tag theme="primary" variant="light">
                  {{ plugin.t('order.status_text.' + data.status) }}
                </t-tag>
              </div>
            </t-col>
            <t-col :span="2">
              <div class="item wrap">
                <div class="name">{{ plugin.t('order.ticket') }}</div>
                {{ data.ticket }}
              </div>
            </t-col>
          </t-row>
        </div>
        <div class="bg-box" v-loading="loading" style="margin:0;">
          <div class="title">{{ plugin.t('order.info.0') }}</div>
          <Table :data="list" />
        </div>
      </div>
    </template>
  </t-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import Table from './info_table.vue'
  import orderStore from '../../store/order';

  const plugin = index.plugin
  const show = ref(false)
  const data = ref({})
  const list = ref([])
  const loading = ref(false)

  const open = row => {
    data.value = row
    show.value = true

    onItem(row)
  }

  // 获取商品列表
  const onItem = (row) => {
    loading.value = true
    list.value = []
    orderStore.item([row]).then(items => {
      list.value = items[row.number] ?? []
    }).finally(() => loading.value = false)
  }

  defineExpose({ open })
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-miravia-order-info{
    @include table-size(12px);

    .content{
      overflow: hidden;
    }

    .t-dialog{
      background-color: $color-bg;
    }

    .bg-box{
      padding: 25px;
    }

    .title{
      color: $color-title;
      font-size: 16px;
      padding-bottom: 15px; 
      font-weight: bold;
    }

    .item{  
      color: $color-title;
      font-size: 14px;
      line-height: 20px;
      
      .name{
        color: $color-body;
        padding-bottom: 15px;
      }

      span.color{
        color: $color;
      }
    }
  }
</style>